<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link href="plugin/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="plugin/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/table.css">

</head>
<body style="background-color: #e6ecf5;min-width: 1100px">
<main class="main">
    <!--头部-->
    <header class="heared">
        <span class="head-logo">前后台通用模板</span>
        <ul class="head-ul"><li><a href="home.html" class="active-a">首页</a> </li>
            <li><a href="videlctr.html">视频监控</a> </li>
            <li><a href="map.html">地图管理</a> </li>
            <li><a href="static.html">统计分析</a> </li>
            <li><a href="form.html">表单信息</a> </li>
            <li><a href="user.html">用户管理</a></li>
            <li><a href="part.html">部门管理</a></li>
            <li><a href="date.html">日程管理</a></li>

        </ul>
        <div class="head-right"><span id="time"></span><span>Admin</span></div>
    </header>
    <!--身体-->
    <section class="section" >


        <div class="l_left news_left">

            <h6>部门目录</h6>
            <div class="tree_left_top">
                <div class=" order_ztree l_left organize_ztree" style="width: 100%">
                    <p><ul id="treeDemo" class="ztree"  style=" overflow:auto;margin-left: 20px"></ul></p>
                </div>
            </div>
        </div>
        <div class="l_left news_right">
            <h6>用户管理</h6>

            <div class="notice_check">
                <div class="btn-group l_left" style="margin-right: 4px">
                    <button type="button" class="btn btn-default change" style="height: 30px;line-height: 30px;padding: 0 12px !important;font-size: 12px">选择条件</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="height: 30px;line-height: 30px">
                        <span class="caret"></span>
                        <span class="sr-only"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>部门名称</li>
                        <li>部门编号</li>
                        <li>负责人</li>
                        <li>电话号</li>
                        <li>分机号</li>
                    </ul>
                </div>
                <div class="l_left">
                    <input type="text" class="find_input">

                </div>
                <button class="check_btn">查询</button>
                <div class="notice_nav r_right">
                    <a class="btn btn-default" onclick="addUser()"><span class="glyphicon glyphicon-plus"></span>新增</a>
                    <a class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>删除</a>
                    <a class="btn btn-default" onclick="addUser()"><span class="glyphicon glyphicon-pencil"></span>编辑</a>
                    <a class="btn btn-default" onclick="reset_password()"><span class="glyphicon glyphicon-lock"></span>重置密码</a>
                </div>
                <div class="clear"></div>
            </div>
            <ul class="news_table department_table">
                <li>
                    <table id="table" class="table_style" style="margin: 0 auto" ></table>
                </li>
            </ul>

        </div>
        <div class="clear"></div>

    </section>

</main>
<script src="js/jquery.js"></script>
<script src="plugin/bstable/js/bootstrap.min.js"></script>
<script src="plugin/bstable/js/bootstrap-table.js"></script>
<script src="plugin/bstable/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="plugin/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="plugin/ztree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="plugin/ztree/jquery.ztree.exedit-3.5.js"></script>
<script src="plugin/layer_v2.1/layer/layer.js"></script>
<script src="js/organize.js"></script>

<script>
    $(function(){
        $(".head-ul li a").click(function(){
            $(this).addClass("active-a").parents("li").siblings().find("a").removeClass("active-a");
            $(this).parents('li').find("ul").show();
            $(this).parents("li").sibling().find("ul").hide();

        })
        $('#table').bootstrapTable({
            method: "get",
            striped: true,
            singleSelect: false,
            url: "json/user.json",
            dataType: "json",
            pagination: true, //分页
            pageSize: 10,
            pageNumber: 1,
            search: false, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams: null,
            columns: [
                {
                    checkbox: "true",
                    field: 'check',
                    align: 'center',
                    valign: 'middle'
                }
                ,
                {
                    title: "用户名",
                    field: 'id',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '性别',
                    field: 'sex',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '年龄',
                    field: 'date',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '部门',
                    field: 'person',
                    align: 'center'
                },
                {
                    title: '职位',
                    field: 'oper',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '角色',
                    field: 'title',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '备注',
                    field: 'person',
                    align: 'center'
                }
            ]
        });
        getTime();
    })
//    格式化时间
   function getTime(){
       var day=new Date();
       var year=day.getFullYear();
       var moutth=day.getMonth()+1;
       var date=day.getDate();
       var hour=day.getHours();
       var min=day.getMinutes();
       var sec=day.getSeconds();
       var str=year+'-'+moutth+'-'+date+' '+hour+":"+min+':'+sec;
       $("#time").text(str);
   }
</script>
</body>
</html>